<template>
    <div class="help">
        <div class="use">使用帮助</div>
        <div class="usually">
            <div class="question">常见问题</div>
            <div class=" iconfont icon-dengpao"></div>
        </div>
        <div class="one">1.优惠券如何使用？</div>
        <div class="two">2.取消订单后钱什么时候到账？</div>
        <div class="three">3.可以固定同一个阿姨服务吗？</div>
        <div class="four">4.如何选择上一次服务的阿姨？</div>
        <div class="five">5.预约成功后在哪查看？</div>
        <div class="more">
            <div class="quest">更多问题</div>
            <div class=" iconfont icon-dengpao"></div>
        </div>
        <div class=" correlation">
            <div class="order">订单相关</div>
            <div class="customer">客户端使用</div>
            <div class=" favourable">优惠劵与活动</div>
        </div>
        <div class="pay">
            <div class="cost">支付与费用</div>
            <div class="service">服务相关</div>
        </div>
    </div>
</template>
<style scoped>
.help{
    padding:0 1em;
}
 .help .use{
    width: 100%;
    height: 46px;
    text-align: center;
    line-height: 46px;
    border-bottom-width: 1px;
    border-bottom-color: #ebedf0;
    border-bottom-style: solid;
 }
.help .usually{
    width: 100%;
    height: 55px;
    line-height: 55px;
    border-bottom-width: 1px;
    border-bottom-color: #ebedf0;
    border-bottom-style: solid;
}
.help .usually .question{
    float: right;
    margin-right: 228px;
    font-size: 20px;
    font-weight: 100;
}
.help .usually div:last-child{
    float: left;
    font-size: 28px;
    color: #f9db91;
}
.help .one{
    height: 44px;
    border-bottom-width: 1px;
    border-bottom-color: #ebedf0;
    border-bottom-style: solid;
    text-align: left;
    line-height: 44px;
    font-size:14px;
}
.help .two{
    height: 44px;
    border-bottom-width: 1px;
    border-bottom-color: #ebedf0;
    border-bottom-style: solid;
    text-align: left;
    font-size:14px;
    line-height: 44px;
}
.help .three{
    height: 44px;
    border-bottom-width: 1px;
    border-bottom-color: #ebedf0;
    border-bottom-style: solid;
    text-align: left;
    font-size:14px;
    line-height: 44px;
}
.help .four{
    height: 44px;
    border-bottom-width: 1px;
    border-bottom-color: #ebedf0;
    border-bottom-style: solid;
    text-align: left;
    font-size:14px;
    line-height: 44px;
}
.help .five{
    height: 44px;
    border-bottom-width: 1px;
    border-bottom-color: #ebedf0;
    border-bottom-style: solid;
    text-align: left;
    font-size:14px;
    line-height: 44px;
}
.help .more{
    width: 100%;
    height: 55px;
    line-height: 55px;
    border-bottom-width: 1px;
    border-bottom-color: #ebedf0;
    border-bottom-style: solid;
}
.help .more .quest{
    float: right;
    margin-right: 228px;
    font-size: 20px;
    font-weight: 100;
}
.help .more div:last-child{
    float: left;
    font-size: 28px;
    color: #f9db91;
}
.help .correlation{
    width: 100%;
    height: 50px;
    display: flex;
    line-height: 50px;
    margin-top: 10px;
    font-size: 14px;
}
.help .correlation .order{
    width: 33%;
    justify-content: space-around;
    text-align: center;
    border: .5px solid #ebedf0 ;
}
.help .correlation .customer{
    border: .5px solid #ebedf0 ;
    width: 33%;
    text-align: center;
    justify-content: space-around;
}
.help .correlation .favourable{
    border: .5px solid #ebedf0 ;
    width: 33%;
    text-align: center;
    justify-content: space-around;
}
.help .pay{
    width: 82%;
    height: 50px;
    display: flex;
    line-height: 50px;
    font-size: 14px;
    margin-top: 10px; 
    position: relative;
    bottom: 12px;
}
.help .pay .cost{
     width: 40%;
    justify-content: space-around;
    text-align: center;
    border: .5px solid #ebedf0;
    border-top-style: none;
}
.help .pay .service{
     width: 40%;
    justify-content: space-around;
    text-align: center;
    border: .5px solid #ebedf0;
    border-top-style: none;
}
</style>